<#noparse><#import "/spring.ftl" as spring />
<#import "/tpl/layouts/xyLayout.ftl" as layout>
<@layout.title>...</@layout.title>
<@layout.css></@layout.css><@layout.content></#noparse>
<div id="mainBox" class="mainBox" v-loading.fullscreen.lock="fullScreenLoading">
    <div class="searchBox">
        <el-row>
            <div class="title" style="margin-top:20px">查询条件</div>
        </el-row>
        <el-row>
            <el-form v-model="queryForm" ref="queryForm" label-width="25%">
                <el-row :gutter="0"><#list table.columnList as col>
                    <el-col :span="6">
                        <el-form-item property="${col.name!}" label="${col.comment!}">
                            <el-input type="text" placeholder="请输入 ${col.comment!}" v-model="queryForm.${col.name!}"></el-input>
                        </el-form-item>
                    </el-col></#list>
                    <el-col :span="6">
                        <el-row style="text-align:left;padding-left:50px;">
                            <el-button type="primary" v-on:click="queryFormSearch">查询</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
        <el-row>
            <el-button v-permit="'${module}:${table.name?uncap_first}:add'" type="success" v-on:click="showAddDialog">新建</el-button>
            <el-button v-permit="'${module}:${table.name?uncap_first}:edit'" type="warning" v-on:click="showEditDialog">编辑</el-button>
            <el-button v-permit="'${module}:${table.name?uncap_first}:delete'" type="danger" v-on:click="deleteIt">删除</el-button>
        </el-row>
        <el-row>
            <div class="title" style="margin-top:20px">查询结果</div>
        </el-row>
        <el-row>
            <el-table ref="resultTable" v-loading="tableLoading" element-loading-text="拼命加载中..." :data="tableDataList" :border="tableBorder" :highlight-current-row="tableHighlightCurrentRow" style="width:100%" v-on:current-change="currentRowChange" v-on:selection-change="multiRowSelect" v-on:sort-change="pageSortChange" :header-row-style="setTableHeaderRowStyle">
                <el-table-column align="center" type="index"></el-table-column><#list table.columnList as col>
                <el-table-column align="center" prop="${col.name!}" label="${col.comment!}"></el-table-column></#list>
                <!--
                <el-table-column align="center" prop="type" label="类型" :formatter="showNameFormatter"></el-table-column>
                -->
            </el-table>
            <el-pagination v-on:size-change="pageSizeChange" v-on:current-change="currentPageChange" :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, -> , sizes, prev, pager, next" :total="page.pageTotal"></el-pagination>
        </el-row>
    </div>
    <el-dialog title="添加${table.comment!}" width="65%" :visible.sync="addDialogVisible">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="30%">
            <el-row><#list table.columnForAddList as col>
                <el-col :span="12">
                    <el-form-item prop="${col.name!}" label="${col.comment!}">
                        <el-input type="text" v-model="addForm.${col.name!}" placeholder="请输入 ${col.comment!}"></el-input>
                    </el-form-item>
                </el-col></#list>
            </el-row>
            <el-row class="tac">
                <el-button type="primary" v-on:click="submitAddForm">保存</el-button>
                <el-button type="info" v-on:click="closeForm('addDialogVisible')">关闭</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog title="编辑${table.comment!}" width="65%" :visible.sync="editDialogVisible">
        <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-width="30%">
            <el-row><#list table.columnForEditList as col>
                <el-col :span="12">
                    <el-form-item prop="${col.name!}" label="${col.comment!}">
                        <el-input type="text" v-model="editForm.${col.name!}" placeholder="请输入 ${col.comment!}"></el-input>
                    </el-form-item>
                </el-col></#list>
            </el-row>
            <el-row class="tac">
                <el-button type="primary" v-on:click="submitEditForm">更新</el-button>
                <el-button type="info" v-on:click="closeForm('editDialogVisible')">关闭</el-button>
            </el-row>
        </el-form>
    </el-dialog>
</div><#noparse>
</@layout.content>
<@layout.script></#noparse>
<script>
/*<![CDATA[*/
(function(){
    var vue = new Vue(Vue.extendData({
        el:'#mainBox',
        data:{
            queryForm:{<#list table.columnList as col>
               ${col.name}:''<#if col?has_next>,</#if></#list>
            },
            tableLoading:false,
            tableBorder:true,
            tableHighlightCurrentRow:true,
            tableDataList:[],
            selectRow:null,
            selectRowList:[],
            addForm:{<#list table.columnForAddList as col>
                '${col.name!}':''<#if col?has_next>,</#if></#list>
            },
            addFormRules:{<#list table.columnForAddList as col>
                '${col.name!}':[{'required':true, 'message':'请输入 ${col.comment!}', 'trigger':'blur'}]<#if col?has_next>,</#if></#list>
            },
            addDialogVisible:false,
            editForm:{<#list table.columnList as col>
                '${col.name!}':''<#if col?has_next>,</#if></#list>
            },
            editFormRules:{<#list table.columnForEditList as col>
                '${col.name!}':[{'required':true, 'message':'请输入 ${col.comment!}', 'trigger':'blur'}]<#if col?has_next>,</#if></#list>
            },
            editDialogVisible:false
        },
        methods:{//搜索数据
            queryFormSearch:function(withPageParam){
                this.tableLoading=true;
                this.selectRow=null;
                this.selectRowList=[];
                this.tableDataList=[];
                var queryParam={};<#list table.columnList as col>
                this.copyEffectiveProperty(this.queryForm, queryParam, '${col.name!}');</#list>
                if((withPageParam!=null && withPageParam==true)==false){
                    this.page.currentPage=1;
                }
                queryParam['x_pn']=this.page.currentPage;
                queryParam['x_pc']=this.page.pageSize;
                this.$http.post('list${actionSuffix}?_='+Math.random(), queryParam).then(function(_resp){
                    this.tableLoading=false;
                    this.tableDataList = _resp.body.dataList!=null?_resp.body.dataList:[];
                    this.page.pageTotal = _resp.body.totalCount!=null&&_resp.body.totalCount<0?0:_resp.body.totalCount;
                },function(_resp){
                    this.tableLoading=false;
                    this.$alert('查询失败,参考信息:'+_resp.bodyText, '警告');
                });
            },
            showAddDialog:function(){
                if(this.$refs['addForm']!=null){
                    this.$refs['addForm'].resetFields();
                }<#list table.columnForAddList as col>
                this.addForm.${col.name!}='';</#list>
                this.addDialogVisible=true;
            },
            submitAddForm:function(){
                this.$refs['addForm'].validate((valid)=>{
                    if(valid==true){
                        var data1={};<#list table.columnForAddList as col>
                        this.copyEffectiveProperty(this.addForm, data1, '${col.name!}');</#list>
                        this.fullScreenLoading=true;
                        this.$http.post('add${actionSuffix}?_='+Math.random(), data1).then(function(_resp){
                            this.fullScreenLoading=false;
                            if(_resp.body.code==1){
                                var _vue=this;
                                this.addDialogVisible=false;
                                this.$alert('新建成功','提示',{'callback':function(){
                                    _vue.queryFormSearch();
                                }});
                            }else{
                                if (_resp.body.message) {
                                    this.$alert(_resp.body.message, '提示');
                                } else {
                                    this.$alert('新建失败,参考信息:{code:'+_resp.body.code+'}', '警告');
                                }
                            }
                        },function(_resp){
                            this.fullScreenLoading=false;
                            this.$alert('新建失败,{httpStatus:'+_resp.status+'},参考信息:'+_resp.bodyText, '警告');
                        });
                    }else{
                       //validate fail
                       return false;
                    }
                });
            },
            showEditDialog:function(){
                if(this.selectRow==null){
                    this.$alert('请选择一条数据','提示');
                }else{
                    if(this.$refs['editForm']!=null){
                        this.$refs['editForm'].resetFields();
                    }<#list table.columnList as col>
                    this.editForm['${col.name!}']=this.translateNullToEmptyString(this.selectRow['${col.name!}']);</#list>
                    this.editDialogVisible=true;
                }
            },
            submitEditForm:function(){
                this.$refs['editForm'].validate((valid)=>{
                    if(valid==true){
                        var data1={};<#list table.columnForEditList as col>
                        this.copyEffectiveProperty(this.editForm, data1, '${col.name!}');</#list>
                        this.fullScreenLoading=true;
                        this.$http.post('edit${actionSuffix}?_='+Math.random(), data1).then(function(_resp){
                            this.fullScreenLoading=false;
                            if(_resp.body.code==1){
                                var _vue=this;
                                this.editDialogVisible=false;
                                this.$alert('更新成功','提示',{'callback':function(){
                                    _vue.queryFormSearch();
                                }});
                            }else{
                                if (_resp.body.message) {
                                    this.$alert(_resp.body.message, '提示');
                                } else {
                                    this.$alert('更新失败,参考信息:{code:'+_resp.body.code+'}', '警告');
                                }
                            }
                        },function(_resp){
                            this.fullScreenLoading=false;
                            this.$alert('更新失败,{httpStatus:'+_resp.status+'},参考信息:'+_resp.bodyText, '警告');
                        });
                    }else{
                        //validate fail
                        return false;
                    }
                });
            },//关闭dialog
            closeForm:function(v){
                if(this[v]==true){this[v]=false;}
            },
            deleteIt:function(){
                if(this.selectRow==null){
                    this.$alert('请选择一条数据','提示');
                }else{
                    var _vue=this;
                    var _data3={};<#list table.pkColumnList as col>
                    this.copyEffectiveProperty(this.selectRow, _data3, '${col.name!}');</#list>
                    this.$confirm('您确认删除已选定数据 \''+JSON.stringify(_data3)+'\' 么, 注意:删除后不可恢复!!!', '警告',{
                        'callback':function(opt){
                            if('confirm'===opt){
                                _vue.$http.post('delete${actionSuffix}?_='+Math.random(), _data3).then(function(_resp){
                                    _vue.fullScreenLoading=false;
                                    if(_resp.body.code>0){
                                        _vue.$alert('删除成功');
                                        _vue.queryFormSearch();
                                    }else{
                                        if (_resp.body.message) {
                                            this.$alert(_resp.body.message, '提示');
                                        } else {
                                            this.$alert('删除失败,参考信息:{code:'+_resp.body.code+'}', '警告');
                                        }
                                    }
                                }, function(_resp){
                                    _vue.fullScreenLoading=false;
                                    _vue.$alert('删除失败,{httpStatus:'+_resp.status+'},参考信息:'+_resp.bodyText, '警告');
                                });
                            }
                        }
                    });
                }
            }
        }
    }));
    //因为在排序回调函数中已经调用查询数据函数,所以此处不再调用
    //vue.queryFormSearch();
})();
/*]]>*/
</script><#noparse></@layout.script></#noparse>
